<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>
    小米商城 - 小米10 Pro、Redmi Note 9、小米MIX Alpha，小米电视官方网站
  </title>
  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
  <!-- 引入icon图标 -->
  <link rel="stylesheet" href="lib/yidongduan/iconfont.css" />
  <link rel="stylesheet" href="lib/swiper-5.4.5/package/css/swiper.min.css">
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <div class="header">
    <!-- 头部的背景图 -->
    <div class="header-img">
      <a href="#"></a>
    </div>
    <!-- 头部导航条 -->
    <div class="header-navigation">
      <div class="container">
        <!-- 头部导航条左边 -->
        <div class="header-navigation-left">
          <a href="#">小米商城</a>
          <span class="spa">|</span>
          <a href="#">MIUI</a>
          <span class="spa">|</span>
          <a href="#">loT</a>
          <span class="spa">|</span>
          <a href="#">云服务</a>
          <span class="spa">|</span>
          <a href="#">天星科技</a>
          <span class="spa">|</span>
          <a href="#">有品</a>
          <span class="spa">|</span>
          <a href="#">小米开发平台</a>
          <span class="spa">|</span>
          <a href="#">企业团购</a>
          <span class="spa">|</span>
          <a href="#">资质证照</a>
          <span class="spa">|</span>
          <a href="#">协议规则</a>
          <span class="spa">|</span>
          <a href="#" class="download-a">下载app</a>
          <!-- 下载图标 -->
          <span class="download">
            <img src="images/index/download.png" alt="" />
            小米商城APP
          </span>
          <span class="spa">|</span>
          <a href="#">智能生活</a>
          <span class="spa">|</span>
          <a href="#">Select Location</a>
        </div>
        <!-- 头部导航栏购物车 -->
        <div class="header-navigation-right">
          <a href="#" class="shopping-cart">
            <em class="iconfont icon-gouwuche1"></em>
            <em class="shopping-text">购物车</em>
            <!-- 商品数量 -->
            <span class="quantityOfCommodity">(0)</span>
          </a>
          <div class="shopping-hint">
            <!-- 当有商品时候添加到这个里面 -->
            <ul class="shopping-productList"></ul>
            <em>购物车还没有商品，赶紧选购吧!</em>
          </div>
        </div>
        <!-- 头部导航登录注册消息 -->
        <div class="header-navigation-news">
          <a href="html/log-in.html" class="ring-up">登录</a>
          <span class="spa">|</span>
          <a href="#" class="sign-in">注册</a>
          <span class="spa">|</span>
          <span class="header-news">
            <a href="#" class="message-notification">消息通知</a>
          </span>
        </div>
      </div>
    </div>
    <!-- 头部导航商品导航条-->
    <div class="header-Commodity-navigation-bar">
      <div class="container">
        <!-- logo -->
        <div class="Commodity-navigation-bar-logo">
          <a href="#" class="bar-logo">
            <em class="mi-home"></em>
            <em class="mi-logo"></em>
          </a>
        </div>
        <!-- 商品导航条 -->
        <div class="Commodity-navigation-bar">
          <ul>
            <li class="classification-of-goods">
              <a href="#">
                <span class="text">全部商品分类</span>
              </a>
              <div class="goods_category">
                <ul>
                  <li>
                    <a href="#">手机 电话卡
                      <em class="iconfont icon-right2"></em>
                    </a>

                  </li>
                  <li>
                    <a href="#">电视 盒子
                      <em class="iconfont icon-right2"></em>
                    </a>

                  </li>
                  <li>
                    <a href="#">笔记本 显示器
                      <em class="iconfont icon-right2"></em>
                    </a>

                  </li>
                  <li>
                    <a href="#">家电 插线板
                      <em class="iconfont icon-right2"></em>
                    </a>

                  </li>
                  <li>
                    <a href="#">出行 穿戴
                      <em class="iconfont icon-right2"></em>
                    </a>

                  </li>
                  <li>
                    <a href="#">智能 路由器
                      <em class="iconfont icon-right2"></em>
                    </a>

                  </li>
                  <li>
                    <a href="#">电源 配件
                      <em class="iconfont icon-right2"></em>
                    </a>

                  </li>
                  <li>
                    <a href="#">健康 儿童
                      <em class="iconfont icon-right2"></em>
                    </a>

                  </li>
                  <li>
                    <a href="#">耳机 音箱
                      <em class="iconfont icon-right2"></em>
                    </a>

                  </li>
                  <li>
                    <a href="#">生活 箱包
                      <em class="iconfont icon-right2"></em>
                    </a>

                  </li>
                </ul>
              </div>
            </li>
            <li>
              <a href="#">
                <span class="text">小米手机</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="text">Redmi红米</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="text">电视</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="text">笔记本</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="text">家电</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="text">路由器</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="text">智能硬件</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="text">服务</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="text">社区</span>
              </a>
            </li>
          </ul>
        </div>
        <!-- 搜索框 -->
        <div class="search-box">
          <form class="search-box-form">
            <input type="text" placeholder="小米手机" class="searchBoxForm1" />
            <input type="submit" value="&#xe9cf;" class="iconfont icon-search11" />
          </form>
          <!-- 搜索框下的列表框 -->
          <div class="search-box-listbox">
            <ul>
              <li data-key="王一博同款手机">
                <a href="#">王一博同款手机</a>
              </li>
              <li data-key=" Note 9 新品"><a href="#">Note 9 新品</a></li>
              <li data-key="小米10"><a href="#">小米10</a></li>
              <li data-key="Redmi K30 Pro"><a href="#">Redmi K30 Pro</a></li>
              <li data-key="全部商品"><a href="#">全部商品</a></li>
              <li data-key="卡丁车"><a href="#">卡丁车</a></li>
              <li data-key="耳机"><a href="#">耳机</a></li>
              <li data-key="空调"><a href="#">空调</a></li>
            </ul>
          </div>
        </div>
        <!-- 双12 -->
        <div class="Double-Twelve">
          <div>
            <a href="#"> </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="banner">

    <div class="container">
      <div class="banner_top">
        <!-- 轮播图 -->
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#" class="banner_img">
                <img src="images/index/d00e132d1b4fd7a796b35bcfe54bc2c8.webp" alt="">
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#" class="banner_img">
                <img src="images/index/0ef4160c861b998239bce9adb82341e7.jpg" alt="">
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#" class="banner_img">
                <img src="images/index/b86977b8a1e0277a12c1869fefbac9a5.jpg" alt="">
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#" class="banner_img">
                <img src="images/index/d01b4f4d20d1c909454b296f34143004.webp" alt="">
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#" class="banner_img">
                <img src="images/index/ec39b7eb802279eb693520915afdfa07.webp" alt="">
              </a>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev "></div>
          <div class="swiper-button-next "></div>
        </div>

        <!-- banner下方 -->
        <div class="banner_bottom"></div>
      </div>

    </div>
  </div>
  <script src="lib/jQeruy.js"></script>
  <script src="lib/swiper-5.4.5/package/js/swiper.min.js"></script>
  <script src="js/index.js"></script>
  <script>
    new Index()
    var mySwiper = new Swiper('.swiper-container', {
      direction: 'horizontal', // 水平切换选项
      loop: true, // 循环模式选项
      autoplay: true, //自动切换
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        clickableClass: 'my-pagination-clickable',
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })

  </script>
</body>

</html>